<template>
  <div class="notSupport-container">
    <viewHeader ref="viewHeader" :file-id="fileId" @file="handleGetFile" />
    <div style="flex: 1;justify-content: center;align-items: center;  display: flex;">
      <div class="notSupport-box">
        <img :src="require('@/assets/images/error.png')" class="ErrorPage_img_2aMXQ">
        <div class="name">{{ fileResource.originalFileName }}.{{ fileResource.fileExt }}</div>
        <div class="msg">
          <div>该文件暂不支持在线预览，请下载查看</div>
        </div>
        <div class="btns">
          <FileDownload :file-id="fileId">
            <el-button type="primary">下 载</el-button>
          </FileDownload>

        </div>
      </div>
    </div>
  </div>
</template>
<script>
import viewHeader from './header.vue'

export default {
  components: { viewHeader },
  data() {
    return {
      fileId: null,
      fileResource: {}
    }
  },
  mounted() {
    var { id } = this.$route.params
    this.fileId = id
  },
  methods: {
    handleGetFile(file) {
      this.fileResource = file
    }
  }
}
</script>
<style lang="scss" scoped>
.notSupport-container{
  display: flex;
  flex-direction: column;
  height: 100%;
  .notSupport-box {
    background: #fff;
    padding: 30px 0 60px;
    width: 450px;
    box-shadow: 0 12px 30px 0 rgb(0 0 0 / 5%);
    text-align: center;
    img {
      display: block;
      width: 150px;
      height: 150px;
      user-select: none;
      margin: 0 auto;
    }
    .name {
      color: #3c414b;
      font-size: 16px;
      //line-height: 16px;
      font-weight: 400;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      margin: 16px 30px 0;
    }
    .msg {
      color: #949aae;
      font-size: 14px;
      line-height: 20px;
      margin: 12px auto 0;
      width: 280px;
    }
    .btns{
      margin-top: 32px;
      .el-button{
          width: 124px;
      }
    }
  }
}
</style>
